|
1
|
|
|
/** global: screen */ |
|
2
|
|
|
|
|
3
|
|
|
/** |
|
4
|
|
|
* Class to call the rich filemanager from a page. |
|
5
|
|
|
* Filemanager can be created as independent window or in 'modal' mode |
|
6
|
|
|
* running in a dynamicaly created iframe. |
|
7
|
|
|
* The path of the selected image is set as value of an edit field or |
|
8
|
|
|
* as src of an image element. |
|
9
|
|
|
* If specified, height and/or widthof the selected image file is set as |
|
10
|
|
|
* value to the corresponding edit field. |
|
11
|
|
|
*/ |
|
12
|
|
|
class RichFmConnector |
|
13
|
|
|
{ |
|
14
|
|
|
/** |
|
15
|
|
|
* Constructor need the path to the rich filemanager |
|
16
|
|
|
*/ |
|
17
|
|
|
constructor(strRfmPath) |
|
18
|
|
|
{ |
|
19
|
|
|
this.strRfmPath = strRfmPath; |
|
20
|
|
|
this.editID = null; |
|
21
|
|
|
this.imgID = null; |
|
22
|
|
|
this.imgWidthID = null; |
|
23
|
|
|
this.imgHeightID = null; |
|
24
|
|
|
this.oBrowserWnd = null; |
|
25
|
|
|
this.oBrowserDiv = null; |
|
26
|
|
|
} |
|
27
|
|
|
|
|
28
|
|
|
/** |
|
29
|
|
|
* Filebrowser is created inside a independent window. |
|
30
|
|
|
*/ |
|
31
|
|
|
browseWindow(editID, imgID, strExpand) |
|
32
|
|
|
{ |
|
33
|
|
|
this.editID = editID; |
|
34
|
|
|
this.imgID = imgID; |
|
35
|
|
|
|
|
36
|
|
|
let strBrowser = this.strRfmPath; |
|
37
|
|
|
if (strExpand != '') { |
|
38
|
|
|
strBrowser += "?expandedFolder=" + strExpand; |
|
39
|
|
|
} |
|
40
|
|
|
|
|
41
|
|
|
let iWidth = screen.width * 0.7; |
|
42
|
|
|
let iHeight = screen.height * 0.7; |
|
43
|
|
|
let iLeft = (screen.width - iWidth) / 2 ; |
|
44
|
|
|
let iTop = (screen.height - iHeight) / 2 ; |
|
45
|
|
|
|
|
46
|
|
|
let strOptions = "toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,dependent=yes"; |
|
47
|
|
|
strOptions += ",width=" + iWidth ; |
|
48
|
|
|
strOptions += ",height=" + iHeight ; |
|
49
|
|
|
strOptions += ",left=" + iLeft ; |
|
50
|
|
|
strOptions += ",top=" + iTop ; |
|
51
|
|
|
|
|
52
|
|
|
this.oBrowserWnd = window.open(strBrowser, 'BrowseWindow', strOptions); |
|
53
|
|
|
|
|
54
|
|
|
window.addEventListener('message', (e) => {this.handlePostMessage(e.data);}); |
|
55
|
|
|
} |
|
56
|
|
|
|
|
57
|
|
|
browseServerModal(strExpand) |
|
58
|
|
|
{ |
|
59
|
|
|
let strBrowser = this.strRfmPath; |
|
60
|
|
|
if (strExpand != '') { |
|
61
|
|
|
strBrowser += "?expandedFolder=" + strExpand; |
|
62
|
|
|
} |
|
63
|
|
|
|
|
64
|
|
|
this.oBrowserDiv = document.createElement('div'); |
|
65
|
|
|
this.oBrowserDiv.id = 'fm-container'; |
|
66
|
|
|
let oHeader = document.createElement('h1'); |
|
67
|
|
|
oHeader.append(document.createTextNode('Rich Filemanager')); |
|
68
|
|
|
oHeader.onclick = () => { this.handleOnClose(); }; |
|
69
|
|
|
this.oBrowserDiv.append(oHeader); |
|
70
|
|
|
let oBrowserIFrame = document.createElement('iframe'); |
|
71
|
|
|
oBrowserIFrame.id = 'fm-iframe'; |
|
72
|
|
|
oBrowserIFrame.src = strBrowser; |
|
73
|
|
|
this.oBrowserDiv.append(oBrowserIFrame); |
|
74
|
|
|
document.body.append(this.oBrowserDiv); |
|
75
|
|
|
// $('body').css('overflow-y', 'hidden'); |
|
76
|
|
|
|
|
77
|
|
|
window.onmessage = (e) => {this.handlePostMessage(e.data);}; |
|
78
|
|
|
} |
|
79
|
|
|
|
|
80
|
|
|
handlePostMessage(data) |
|
81
|
|
|
{ |
|
82
|
|
|
if (data.source === 'richfilemanager') { |
|
83
|
|
|
let oElement = this.getElement(this.editID); |
|
84
|
|
|
if (oElement) { |
|
85
|
|
|
oElement.value = data.preview_url; |
|
86
|
|
|
} |
|
87
|
|
|
oElement = this.getElement(this.imgID); |
|
88
|
|
|
if (oElement) { |
|
89
|
|
|
oElement.src = data.preview_url; |
|
90
|
|
|
} |
|
91
|
|
|
oElement = this.getElement(this.imgWidthID); |
|
92
|
|
|
if (oElement) { |
|
93
|
|
|
oElement.value = data.ressourceObject.attributes.width; |
|
94
|
|
|
} |
|
95
|
|
|
oElement = this.getElement(this.imgHeightID); |
|
96
|
|
|
if (oElement) { |
|
97
|
|
|
oElement.value = data.ressourceObject.attributes.height; |
|
98
|
|
|
} |
|
99
|
|
|
|
|
100
|
|
|
if (this.oBrowserWnd !== null) { |
|
101
|
|
|
this.oBrowserWnd.close(); |
|
102
|
|
|
this.oBrowserWnd = null; |
|
103
|
|
|
} else if (this.oBrowserDiv !== null) { |
|
104
|
|
|
this.oBrowserDiv.remove(); |
|
105
|
|
|
this.oBrowserDiv = null; |
|
106
|
|
|
} |
|
107
|
|
|
} |
|
108
|
|
|
} |
|
109
|
|
|
|
|
110
|
|
|
handleOnClose() |
|
111
|
|
|
{ |
|
112
|
|
|
if (this.oBrowserDiv !== null) { |
|
113
|
|
|
this.oBrowserDiv.remove(); |
|
114
|
|
|
this.oBrowserDiv = null; |
|
115
|
|
|
} |
|
116
|
|
|
} |
|
117
|
|
|
|
|
118
|
|
|
getElement(id) |
|
119
|
|
|
{ |
|
120
|
|
|
var oElement = null; |
|
121
|
|
|
if (id !== null && id != '') { |
|
122
|
|
|
oElement = document.getElementById(id); |
|
123
|
|
|
} |
|
124
|
|
|
return oElement; |
|
125
|
|
|
} |
|
126
|
|
|
} |
|
127
|
|
|
|
Stefanius67 /
Formgenerator
